import 'package:dotted_border/dotted_border.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:geomancy/styles/index.dart';
import 'package:geomancy/widgets/common_text.dart';
import 'package:geomancy/widgets/stroke_text.dart';

class StarGridWidget extends StatefulWidget {
  final List<int> activeList;
  const StarGridWidget({super.key, required this.activeList});

  @override
  State<StarGridWidget> createState() => _StarGridWidgetState();
}

class _StarGridWidgetState extends State<StarGridWidget> {
  final List directionList = [
    {
      'direction': '东南方：巽',
      'star': '一白',
      'starNameStatus': '贪狼星',
      'effect': '主官运、人缘',
      'lucky': true,
      'active': false,
      'activeColor': const Color.fromRGBO(255, 103, 136, 1),
      'activeBorderColor': ColorStyle.red
    },
    {
      'direction': '正南方：离',
      'star': '六白',
      'starNameStatus': '武曲星',
      'effect': '主横财、贵人',
      'lucky': true,
      'active': false,
      'activeColor': ColorStyle.themeColor,
      'activeBorderColor': const Color.fromRGBO(180, 87, 0, 1)
    },
    {
      'direction': '西南方：坤',
      'star': '八白',
      'starNameStatus': '左辅星',
      'effect': '主财运、置业',
      'lucky': true,
      'active': false,
      'activeColor': ColorStyle.themeColor,
      'activeBorderColor': const Color.fromRGBO(180, 87, 0, 1)
    },
    {
      'direction': '正东方：震',
      'star': '九紫',
      'starNameStatus': '右弼星',
      'effect': '主姻缘、感情',
      'lucky': true,
      'active': false,
      'activeColor': ColorStyle.themeColor,
      'activeBorderColor': ColorStyle.red
    },
    {
      'direction': '中宫',
      'star': '二黑',
      'starNameStatus': '巨门星',
      'effect': '主疾病、伤痛',
      'lucky': false,
      'active': false,
      'activeColor': null,
      'activeBorderColor': null
    },
    {
      'direction': '正西方：兑',
      'star': '四禄',
      'starNameStatus': '文曲星',
      'effect': '主事业、官位',
      'lucky': true,
      'active': false,
      'activeColor': const Color.fromRGBO(105, 208, 228, 1),
      'activeBorderColor': const Color.fromRGBO(0, 69, 133, 1)
    },
    {
      'direction': '东北方：艮',
      'star': '五黄',
      'starNameStatus': '廉贞星',
      'effect': '主凶灾、祸患',
      'lucky': false,
      'active': false,
      'activeColor': null,
      'activeBorderColor': null
    },
    {
      'direction': '正北方：坎',
      'star': '七赤',
      'starNameStatus': '破军星',
      'effect': '主破财、财运',
      'lucky': false,
      'active': false,
      'activeColor': null,
      'activeBorderColor': null
    },
    {
      'direction': '西北方：乾',
      'star': '三碧',
      'starNameStatus': '禄存星',
      'effect': '主是非、官灾',
      'lucky': false,
      'active': false,
      'activeColor': null,
      'activeBorderColor': null
    },
  ];

  @override
  void initState() {
    super.initState();
    initData();
  }

  initData() {
    for(int i = 0; i < widget.activeList.length; i++) {
      directionList[widget.activeList[i]]['active'] = true;
    }
  }


  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: 670.w,
      height: 670.w,
      child: GridView(
        physics: const NeverScrollableScrollPhysics(),
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 3, //横轴三个子widget
          childAspectRatio: 1.0, //宽高比为1时，子widget
          mainAxisSpacing: 13.w,
          crossAxisSpacing: 13.w
        ),
        children: directionList.asMap().keys.map((index) {
          if (directionList[index]['active']) {
            return Container(
                width: double.infinity,
                height: double.infinity,
                padding: EdgeInsets.all(5.w),
                decoration: BoxDecoration(
                    color: directionList[index]['activeColor'],
                    border: Border.all(width: 4.w, color: directionList[index]['activeBorderColor']),
                    borderRadius: BorderRadius.all(Radius.circular(40.w))
                ),
                child: Container(
                  decoration: BoxDecoration(
                      border: Border.all(width: 4.w, color: const Color.fromRGBO(255, 232, 198, 1)),
                      borderRadius: BorderRadius.all(Radius.circular(31.w))
                  ),
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Container(
                        height: 42.w,
                        alignment: Alignment.center,
                        decoration: BoxDecoration(
                          border: Border(
                            bottom: BorderSide(width: 4.w, color: const Color.fromRGBO(255, 232, 198, 1))
                          ),
                        ),
                        child: CommonText(txt: directionList[index]['direction'], fontSize: 26.sp, weight: FontWeight.bold),
                      ),
                      Expanded(child: SizedBox(
                        width: double.infinity,
                        child: Stack(
                          children: [
                            Align(
                              alignment: Alignment.topCenter,
                              child: CommonText(txt: directionList[index]['star'], fontSize: 26.sp, weight: FontWeight.bold),
                            ),
                            Positioned(
                              bottom: 0,
                              left: 0,
                              right: 0,
                              child: Center(
                                child: StrokeText(
                                  txt: directionList[index]['starNameStatus'],
                                  fontSize: 50.sp,
                                  fontWeight: FontWeight.bold,
                                  color: directionList[index]['lucky'] ? const Color.fromRGBO(206, 53, 65, 1) : const Color.fromRGBO(67, 121, 50, 1),
                                ),
                              ),
                            )
                          ],
                        ),
                      )),
                      Container(
                        height: 42.w,
                        alignment: Alignment.center,
                        decoration: BoxDecoration(
                            border: Border(
                              top: BorderSide(width: 4.w, color: const Color.fromRGBO(255, 232, 198, 1))
                            ),
                        ),
                        child: CommonText(txt: directionList[index]['effect'], fontSize: 26.sp, weight: FontWeight.bold),
                      )
                    ],
                  ),
                )
            );
          } else {
            return Container(
              key: ValueKey(index),
              child: DottedBorder(
                borderType: BorderType.RRect,
                strokeWidth: 6.w,
                dashPattern: [12.w, 6.w],
                color: ColorStyle.borderColor,
                padding: EdgeInsets.all(2.w),
                customPath: (size) {
                  // 使用 RRect 创建不同圆角的路径
                  return Path()
                    ..addRRect(RRect.fromRectAndCorners(
                      Rect.fromLTWH(0, 0, size.width, size.height),
                      topLeft: Radius.circular(index == 0 ? 60.w : 20.w),
                      topRight: Radius.circular(index == 2 ? 60.w : 20.w),
                      bottomLeft: Radius.circular(index == 6 ? 60.w : 20.w),
                      bottomRight: Radius.circular(index == 8 ? 60.w : 20.w),
                    ));
                },
                child: Container(
                    width: double.infinity,
                    height: double.infinity,
                    padding: EdgeInsets.only(top: 10.w, bottom: 6.w),
                    decoration: BoxDecoration(
                        color: ColorStyle.themeLightColor,
                        borderRadius: BorderRadius.only(
                          topLeft: Radius.circular(index == 0 ? 60.w : 20.w),
                          topRight: Radius.circular(index == 2 ? 60.w : 20.w),
                          bottomLeft: Radius.circular(index == 6 ? 60.w : 20.w),
                          bottomRight: Radius.circular(index == 8 ? 60.w : 20.w),
                        )
                    ),
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Container(
                          width: 160.w,
                          height: 42.w,
                          alignment: Alignment.center,
                          decoration: BoxDecoration(
                              color: ColorStyle.themeColor,
                              borderRadius: BorderRadius.all(Radius.circular(21.w))
                          ),
                          child: CommonText(txt: directionList[index]['direction'], fontSize: 26.sp, weight: FontWeight.bold),
                        ),
                        CommonText(txt: directionList[index]['star'], fontSize: 26.sp, weight: FontWeight.bold),
                        StrokeText(
                          txt: directionList[index]['starNameStatus'],
                          fontSize: 50.sp,
                          fontWeight: FontWeight.bold,
                          color: directionList[index]['lucky'] ? const Color.fromRGBO(206, 53, 65, 1) : const Color.fromRGBO(67, 121, 50, 1),
                        ),
                        Container(
                          width: 200.w,
                          height: 42.6.w,
                          alignment: Alignment.center,
                          decoration: BoxDecoration(
                              color: const Color.fromRGBO(244, 237, 227, 1),
                              border: Border.all(width: 1.w, color: const Color.fromRGBO(255, 195, 54, 1)),
                              // borderRadius: BorderRadius.all(Radius.circular(6.w))
                              borderRadius: BorderRadius.only(
                                topLeft: Radius.circular(6.w),
                                topRight: Radius.circular(6.w),
                                bottomLeft: Radius.circular(index == 6 ? 34.w : 6.w),
                                bottomRight: Radius.circular(index == 8 ? 34.w : 6.w),
                              )
                          ),
                          child: CommonText(txt: directionList[index]['effect'], fontSize: 26.sp, weight: FontWeight.bold),
                        )
                      ],
                    )
                ),
              ),
            );
          }

        }).toList(),
      ),
    );
  }
}
